<template>
  <el-dialog :visible="showDimission" title="离职申请">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px">
      <el-form-item prop="exceptTime" label="期望离职时间">
        <el-date-picker 
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss" 
            v-model="ruleForm.exceptTime" />
      </el-form-item>
      <el-form-item prop="reason" label="离职原因">
        <el-input :rows="3" style="width: 70%;" v-model="ruleForm.reason" type="textarea" />
      </el-form-item>
    </el-form>

    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button type="primary" size="small" @click="btn">确定</el-button>
        <el-button size="small" @click="close">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { startProcess } from '@/api/approvals'
export default {
  name: 'dimission',
  props: {
    showDimission: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      ruleForm: {
        exceptTime: '',
        reason: '',
        processKey: 'process_dimission', // 特定的审批
        processName: '离职'
      },
      rules: {
        exceptTime: [{ trigger: 'blur',required: true, message: '离职时间不能为空' }],
        reason: [{trigger: 'blur' ,required: true, message: '离职原因不能为空' }]
      }
    }
  },
  methods: {
    async btn() {
      await this.$refs.ruleForm.validate()
      const { username,userId } = this.$store.state.user.userInfo
      await startProcess({...this.ruleForm, username, userId})
      this.$message.success('提交成功')
      this.$emit('update:showDimission', false)
    },
    close() {
      this.ruleForm = {
        // 离职时间
        exceptTime: '',
        // 离职原因
        reason: '',
        processKey: 'process_dimission', // 特定的审批
        processName: '离职'
      }
      this.$refs.ruleForm.resetFields()
      this.$emit('update:showDimission', false)

    }
  }
}
</script>

<style>

</style>